.aboutme-flex {
  display: flex;
  /* 📌 Active le mode Flexbox pour organiser les enfants */
  flex-direction: row;
  /* 📌 Les éléments sont côte à côte (horizontal) */
  flex-wrap: wrap;
  /* ✅ RESPONSIVE: permet aux éléments de passer à la ligne 
                                 si l'écran devient trop étroit */
  gap: 36px;
  /* 📌 Espace de 40px entre les éléments */
  margin-top: 150px;
  padding: 0 20px;
  /* 📌 Marge interne gauche/droite de 20px */
  max-width: 2560px;
  min-width: 0;
  max-height: 1300px;
  min-height: 200px;
  border-bottom-left-radius: 42px;
  border-bottom-right-radius: 62px;
  margin: 0 auto;
  /* 📌 Centre le conteneur horizontalement */
}

.about-me {
  display: flex;
  flex-direction: column;
  /* 📌 Les enfants sont empilés verticalement */
  margin-top: 72px;
  margin-left: 0;
  width: 100%;
  /* ✅ RESPONSIVE: prend 100% de la largeur disponible */
  max-width: 850px;
  /* ✅ RESPONSIVE: mais ne dépasse jamais 800px */
  flex: 1;
  /* ✅ RESPONSIVE: s'étend pour remplir l'espace disponible */
  min-width: 300px;
  /* ✅ RESPONSIVE: ne rétrécit jamais en dessous de 300px */
}
.picture-content{
 margin-inline: auto;
}
.picturemine {

  width: 300px;
  background-color: rgb(199, 241, 255);
  /* ✅ RESPONSIVE: l'image prend 100% de son conteneur */
  max-width: 400px;
  /* ✅ RESPONSIVE: mais ne dépasse jamais 450px */
  height: 60;
  /* ✅ RESPONSIVE: la hauteur s'ajuste automatiquement 
                                 pour garder les proportions de l'image */
  margin: 36px;
  
  border-radius: 902px;
}

.container-star {
  font-size: 700px;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  text-stroke: 1px rgba(0, 0, 0, 0.3);
  background-color: transparent;
  color: transparent;
  -moz-text-stroke: 7px rgba(0, 0, 0, 0.3);
  stroke-width: 7px;
  position: absolute;
  top: 500px;
  right: 25px;
  animation: rotate 5s linear infinite;
  transform-origin:start;
  z-index: -1;
}

@keyframes rotate{
0%{ transform: rotate(-50%, -50%) (0deg); }
 100%{ transform: rotate(360deg); }
}



.second-bio {
  font-family:"Space Grotesk", sans-serif ;
  animation: slideinleft 1s ease-in 1s 1 normal forwards;
  
  
  /* ✅ RESPONSIVE: s'étend pour remplir l'espace */
  margin-left: 20px;
  /* ⚠️ Cette marge fixe sera supprimée sur tablette/mobile */
}

.bio-2 {
  color: rgba(0, 0, 0, 0.75);
  font-family:"Space Grotesk", sans-serif ;
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 10;
  display: flex;
  /* ⚠️ Cette taille sera réduite sur petits écrans */
  font-weight: normal;
  width: 100%;
  /* ✅ RESPONSIVE: prend toute la largeur disponible */
  max-width: 1600px;
  min-width: 0;
  flex-wrap: wrap;
  /* ✅ RESPONSIVE: largeur maximale */
  margin-top: 24px;
  line-height: 1.4;
  /* 📌 Espacement entre les lignes pour lisibilité */
}

.title-bio {
  margin-left: 20px;
  font-family:"Space Grotesk", sans-serif ;
  /* ⚠️ Cette marge sera supprimée sur tablette/mobile */
  font-size: clamp(32px, 8vw, 56px);
  /* ⚠️ Cette taille sera réduite progressivement */
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 900px;
}

@media screen and (max-width: 1024px) {
  .aboutme-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }

  .about-me{
    width: 100%;
    max-width: 100%;
    margin-top: 40px;
  }

  .second-bio{
    width: 100%;
    max-width: 100%;
  }
  
  .title-bio {
    text-align: center;
    margin-left: 0;
    width: 100%;
  }
  
  .second-bio {
    text-align: center;
  }

  .bio-2{
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .aboutme-flex{
    padding: 0 16px;
  }
  
  .title-bio{
    font-size: clamp(28px, 8vw, 42px);
    width: 100%;
    margin-left: 0;
  }

  .second-bio{
    width: 90%;
    margin-left: 0;
    text-align: start;

  }

  .bio-2{
    font-size: clamp(14px, 4vw, 24px);
    padding: 0 10px;
    justify-content: center;
  }

  .picturemine {
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
  }
  .container-star{
    font-size: 600px;
    top: 780px;
    right: 130px;
  }
  
  .about-me{
    margin-top: 32px;
  }
}

@media screen and (max-width: 480px) {
  .picturemine {
    width: 100%;
    margin: 16px auto;
    max-width: 200px;
  }
  
  .title-bio{
    font-size: 28px;
  }
  
  .bio-2{
    font-size: 15px;
  }
  .container-star{
    font-size: 500px;
    top: 700px;
    left: 15px;
    transform-origin: right;
  }
  
}